<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
      <!-- 引入Element UI的CSS样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <!-- 引入Vue -->
      <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
      <!-- 引入Element UI的JavaScript库 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <!-- 引入ECharts -->
      <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
  </head>
  <body>
    <div id="app">
      <el-button>点击我</el-button>
      <!-- 准备一个用于显示图表的容器 -->
      <div id="radarChart" style="width: 600px;height:400px;"></div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello,World!",
      },
      methods: {
        renderRadar() {
          var option = {
            title: {
              text: 'Basic Radar Chart'
            },
            legend: {
              data: ['Allocated Budget', 'Actual Spending']
            },
            radar: {
              // shape: 'circle',
              indicator: [
                { name: 'Sales', max: 6500 },
                { name: 'Administration', max: 16000 },
                { name: 'Information Technology', max: 30000 },
                { name: 'Customer Support', max: 38000 },
                { name: 'Development', max: 52000 },
                { name: 'Marketing', max: 25000 }
              ]
            },
            series: [
              {
                name: 'Budget vs spending',
                type: 'radar',
                data: [
                  {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget'
                  },
                  {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: 'Actual Spending'
                  }
                ]
              }
            ]
          };
          var myChart = echarts.init(document.getElementById('radarChart'));
          myChart.setOption(option);
        },
      },
      mounted() {
        this.renderRadar()
      },
    });
  </script>
</html>